<template>
    <el-header>
        <div>智慧学习平台</div>
        <div>
            <span style="line-height:40px;">欢迎{{ user.username }}</span>
            <el-dropdown>
                <el-avatar :size="40" :src="circleUrl" />
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item>{{ user.role.roleName }}</el-dropdown-item>
                        <el-dropdown-item @click="handleExit">退出</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </el-header>
</template>

<script setup>
import { useUserStore } from '../../store/useUserStore'
import { useRouter } from 'vue-router'
import { useRouterStore } from '../../store/useRouterStore'




const circleUrl = new URL('../../assets/avatar.png', import.meta.url).href




const router = useRouter()
const { changeRouter } = useRouterStore()
const { changeUser, user } = useUserStore()
const handleExit = () => {
    changeUser({})
    changeRouter(false)

    //跳转到登录
    router.push("/login")
}
</script>

<style lang="scss" scoped>
.el-header {
    display: flex;
    justify-content: space-between; //两端对齐
    align-items: center;
    background-color: #0d47a1;
    color: white;
}
</style>